<template>
  <div class="app-container">
    <header>
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部学员" name="first"></el-tab-pane>
          <el-tab-pane label="退单学员" name="second"></el-tab-pane>
        </el-tabs>
        <el-form ref="form" :model="form" inline label-width="140px">
          <el-form-item label="开始日期" label-width="100px">
            <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束日期">
            <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="学员姓名" size="small">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="地址" size="small">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="备注" size="small" label-width="100px">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="教练" size="small" label-width="100px">
            <el-input v-model="form.name"></el-input>
          </el-form-item>


          <el-form-item label="是否退单" size="small">
            <el-select v-model="form.name" placeholder="请选择">
              <el-option label="item.label" value="1">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="已转正式学员" size="small">
            <el-select v-model="form.name" placeholder="请选择">
              <el-option label="item.label" value="2">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="身份证" size="small">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="挂靠点" size="small" label-width="100px">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

        </el-form>

        <div style="display: flex;">
          <div style="width: 100%;">
            <el-button type="primary" size="small" icon="el-icon-search">查询</el-button>
            <el-button type="info" size="small">清空条件</el-button>
            <el-button type="info" size="small">通知客户今天交单总数</el-button>
            <el-button type="info" size="small">导出</el-button>
          </div>
          <div style="display: flex; justify-content: flex-end; width: 100%;">
            <el-button size="small" type="primary" plain>列设置</el-button>
          </div>
        </div>
      </div>
    </header>

    <main class="mt-1">
      <div>
        <el-table :data="tableData" stripe border max-height="580px"
          :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" align="center" sortable>
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="ID" align="center" />
          <el-table-column prop="address" label="姓名" align="center" />
          <el-table-column label="车型" />
          <el-table-column label="增驾" />
          <el-table-column label="性别" />
          <el-table-column label="教练" />
          <el-table-column label="备注" />
          <el-table-column label="挂靠点" />
          <el-table-column label="微信昵称" />
          <el-table-column label="电话" />
          <el-table-column label="身份证号码" width="150" />
          <el-table-column label="已转正式学员" width="150" />
          <el-table-column label="正式学员ID" width="150" />
          <el-table-column label="录入时间" width="150" />
          <el-table-column label="已退单" />
          <el-table-column label="已重传" />
          <el-table-column label="资料类型" />
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>

    <!-- 分页 -->
    <footer>
      <div class="pagin">
        <el-pagination background :current-page="params.page" :page-sizes="[20, 50, 100, 150]"
          :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change='handleSizeChange' @current-change='handleCurrentChange' />
      </div>
    </footer>
  </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-12-11 15:46:41  星期一
* @description   全部学员&退单学员
**/


export default {
  name: 'allStudent',
  data() {
    return {
      activeName: 'first',
      form: {
        synthesis: "",
        region: "",
        name: ""
      },
      tableData: [],
      params: {
        page: 1,
        pageSize: 20
      },
      total: 0
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 一页几条数据
    handleSizeChange(val) {
      this.params.pageSize = val
    },
    // 当前页
    handleCurrentChange(val) {
      this.params.page = val
    },
  }
}
</script>

<style lang="scss" scoped></style>